<template>
  <div id="app">
    <table class="tb">
      <tr>
        <th>欢迎光临_vue开发的收银系统_水果店</th>
        
      </tr>
      <!-- 循环渲染的元素tr -->
        <tr >
        <td colspan="4" >苹果{{price}}￥/斤,折扣{{zhekou}}折</td>
      </tr>

           <tr >
        <td colspan="4">请输入你要购买的斤数<input type="number" v-model="num"></td>
      </tr>
    <tr>
        <td>
          <button @click="del">结账买单~</button>
        </td>
      </tr>
      <tr >
        <td colspan="4">结账单:总价:{{zhongjia}}￥元 折后价{{zhekouhou}}￥元 省了:{{shengle}}￥元</td>
      </tr>
    </table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
     price:10,
    zhekou: '< 8折 >',
    num:0,
    zhongjia:0,
    zhekouhou:0,
    shengle:0,
    }
  },
  methods: {
    del(){
      this.zhongjia=this.price*this.num
      this.zhekouhou=this.zhongjia*0.8
      this.shengle=this.zhongjia-this.zhekouhou
    }
  },
  
}
</script>


  <style>
 #app {
      width: 600px;
      margin: 10px auto;
    }

    .tb {
      border-collapse: collapse;
      width: 100%;
    }

    .tb th {
      background-color: #0094ff;
      color: white;
    }

    .tb td,
    .tb th {
      padding: 5px;
      border: 1px solid black;
      text-align: center;
    }

    .add {
      padding: 5px;
      border: 1px solid black;
      margin-bottom: 10px;
    }
  </style>



